<template>
  <video v-bind="getBindCss">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

    <p class="vjs-no-js">
      您当前的浏览器不支持video,请下载支持video的浏览器
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        支持video的浏览器及版本
      </a>
    </p>
  </video>
</template>

<script lang="ts" setup>
import videojs from 'video.js/dist/video.min.js'
import { buildShortUUID } from '@zm-pkg/core'
import { useHeader } from '@zm-pkg/ui'

import zh from "video.js/dist/lang/zh-CN.json"
import en from "video.js/dist/lang/en.json"
import 'video.js/dist/video-js.min.css'
import './style/theme-sea.css'
import poster from '@assets/imgs/com/oceans.png'

const { getIsZH } = useHeader()

const ID = buildShortUUID()
const player = ref(null)

const getBindCss = computed(() => {
  return {
    id: ID,
    class: 'video-js dt-video'
  }
})

onMounted(() => {
  player.value = videojs(ID, {
    controls: true,
    preload: 'metadata',
    autoplay: true,
    muted: true,
    poster,
    techCanOverridePoster: true,
    languages: {
      zh,
      en
    },
    language: unref(getIsZH) ? 'zh' : 'en',
    playbackRates: [0.5, 1, 1.5, 2, 2.5],
    controlBar: {
      playToggle: {
        replay: true
      },
      volumePanel: {
        inline: false
      },
      currentTimeDisplay: true,
      children: [
        { name: 'playToggle' },
        { name: 'timeDivider' },
        { name: 'progressControl' },
        { name: 'remainingTimeDisplay' },
        { name: 'volumePanel', inline: false },
        { name: 'playbackRateMenuButton' },
        { name: 'audioTrackButton' },
        { name: 'fullscreenToggle' }
      ]
    }
  })
})

onUnmounted(() => {
  if( import.meta.env.PROD ) {
    unref(player).dispose()
  }
})


</script>

<style>
.dt-video{
  width: 100%;
  height: 100%;
}
</style>